<template>
  <div class="home">
    <div class="body">
      <div class="title">库存查询-{{titleName}}查询</div>
      <div class="search">
        <div class="block">
          <span>厂家：</span>
          <el-select
            v-model="spell"
            filterable
            remote
            reserve-keyword
            placeholder="请输入关键词"
            :remote-method="remoteMethod"
            :loading="loading"
            @change="changeCustomer"
            clearable
          >
            <el-option
              v-for="item in options"
              :key="item.FlnkID"
              :label="item.CustomerName"
              :value="item.FlnkID"
            ></el-option>
          </el-select>
        </div>
        <div class="block">
          <span>订单号：</span>
          <el-select v-model="orderOuterCode" placeholder="请选择" @change="changeCode" clearable>
            <el-option
              v-for="item in orderCodeList"
              :key="item.FlnkID"
              :label="item.POCode"
              :value="item.OrderOuterCode"
            ></el-option>
          </el-select>
        </div>
        <div class="block">
          <span style="float:left">款式：</span>
          <span style="float:left;text-align:left;">{{styleName}}</span>
        </div>
        <div class="block">
          <span class="demonstration">日期：</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width:240px"
          ></el-date-picker>
        </div>
        <el-button type="primary" style="width:200px;height:40px" @click="search()">查询</el-button>
      </div>
      
      <div class="table-w">
        <el-table
          :data="stockList"
          :row-style="tableRowStyle"
          :header-cell-style="tableHeaderColor"
          highlight-current-row
          style="width: 100%;font-size:16px;"
        >
          <el-table-column label="序号" width="60" align="center">
            <template slot-scope="scope">{{scope.$index + 1}}</template>
          </el-table-column>
          <el-table-column prop="CustomerName" label="厂家" align="center"></el-table-column>
          <el-table-column prop="POCode" label="订单号" width="160" align="center"></el-table-column>
          <el-table-column prop="StyleName" label="款式" width="160" align="center"></el-table-column>
          <el-table-column prop="MaterielName" label="物料名称" width="160" align="center"></el-table-column>
          <el-table-column prop="DetailExtend1" v-if="$route.query.type.substr(0,1)==='C'" label="裁片名称" width="120" align="center"></el-table-column>
          <el-table-column prop="ColorConfigName" label="型号" width="160" align="center"></el-table-column>
          <el-table-column prop="SpecConfigName" label="规格" width="160" align="center"></el-table-column>
          <!-- <el-table-column prop="StockInt2" label="克重" width="140" align="center"></el-table-column> -->
          <el-table-column prop="StockStr10" label="重量(克)" width="140" align="center">
              <template slot-scope="scope">
                  <div>{{Number(scope.row.StockStr10).toFixed(3)}}</div>
              </template>
          </el-table-column>
          <el-table-column prop="StockInt1" label="匹数" width="140" align="center" v-if="$route.query.type.slice(0, 1) == 'M'"></el-table-column>
          <el-table-column prop="StockCount" label="数量" width="140" align="center">
              <template slot-scope="scope">
                  <div>{{Math.floor(scope.row.StockCount)}}</div>
              </template>
          </el-table-column>
          <el-table-column prop="StockUnitName" label="单位" width="120" align="center"></el-table-column>
          <el-table-column prop="WarehouseName" label="仓库" align="center" width="160"></el-table-column>
          <el-table-column prop="StockStr1" label="缸号/批号" width="140" align="center"></el-table-column>
          <el-table-column prop="StockTime" label="时间" width="160" align="center">
            <template slot-scope="scope">
              {{$moment(scope.row.StockTime).format('YYYY-MM-DD HH:mm')}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="count"
        :current-page.sync="currentPage"
        @current-change="changePage()"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Mixin from '@/components/mixin'
import {getCustomerList, GetSaleContractListByCustomer} from '@/api/common'
import {GetStockHisListByType} from '@/api/search'
export default {
  name: 'search',
  data () {
    return {
      stockList: [],
      titleName: '',
      options: [],
      spell: '',
      loading: false,
      orderOuterCode: '',
      customerList: [],
      orderCodeList: [],
      styleName: '',
      count: 0,
      currentPage: 1,
      dateRange: [
        this.$moment().subtract(1, 'month').format('YYYY-MM-DD'),
        this.$moment().format('YYYY-MM-DD')
      ]
    }
  },
  computed: {},
  components: {},
  mixins: [Mixin], // demo.vue 中声明minix 进行混合
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    // 获取表格数据
    getTable () {
      let vm = this
      let params = new FormData()
      params.append('WarehouseFlnkID', '00000000-0000-0000-0000-000000000000')
      params.append(
        'CustomerFlnkID',
        vm.spell ? vm.spell : '00000000-0000-0000-0000-000000000000'
      )
      params.append('OrderOuterCode', vm.orderOuterCode)
      params.append(
        'StyleFlnkID',
        vm.styleFlnkID ? vm.styleFlnkID : '00000000-0000-0000-0000-000000000000'
      )
      params.append('Type', vm.$route.query.type)
      params.append('HouseFlnkID', '00000000-0000-0000-0000-000000000000')
      params.append('PageIndex', vm.currentPage - 1)
      params.append('PageSize', 10)
      params.append('StartDate', vm.$moment(vm.dateRange[0]).format('YYYY-MM-DD'))
      params.append('EndDate', vm.$moment(vm.dateRange[1]).format('YYYY-MM-DD'))
      GetStockHisListByType(params).then((response) => {
        if (response.data.result) {
          vm.stockList = response.data.data
          vm.count = response.data.count
        }
      })
    },
    remoteMethod (query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.options = this.customerList.filter((item) => {
            return (
              item.SimpleSpell.toLowerCase().indexOf(query.toLowerCase()) > -1
            )
          })
        }, 200)
      } else {
        this.options = this.customerList
      }
    },
    getCustomerList () {
      let vm = this
      let params = new FormData()
      params.append('Spell', vm.spell)
      params.append('BusinessScope', vm.$route.query.type)
      getCustomerList(params).then((response) => {
        if (response.data.result) {
          vm.customerList = response.data.data
          vm.options = response.data.data
        }
      })
    },
    getOrderCodeList () {
      let vm = this
      let params = new FormData()
      params.append('CustomFlnkID', vm.spell)
      params.append('IsAudit', 1)
      GetSaleContractListByCustomer(params).then((response) => {
        if (response.data) {
          vm.orderCodeList = response.data
        }
      })
    },
    changeCustomer () {
      let vm = this
      vm.getOrderCodeList()
    },
    changeCode () {
      let vm = this
      vm.styleName = vm.orderCodeList.filter((item) => {
        return item.OrderOuterCode === vm.orderOuterCode
      })[0] ? vm.orderCodeList.filter((item) => {
        return item.OrderOuterCode === vm.orderOuterCode
      })[0].StyleName : ''
    },
    search () {
      let vm = this
      vm.currentPage = 1
      vm.getTable()
    },
    changePage () {
      let vm = this
      vm.getTable()
    }
  },
  watch: {},
  mounted () {
    let vm = this
    if (vm.$route.query.type) {
      vm.titleName = vm.codeFormat(vm.$route.query.type)
    }
    vm.getTable()
    vm.getCustomerList()
  },
  beforeDestroy: function () {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
@import "~@/css/search/stock.scss";
</style>
<style lang="scss">
.el-date-editor .el-range-separator{
    line-height: 0.6rem;
    color: #fff;
}
</style>
